<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="商户编号">
              <a-input v-model="queryParam.merchantId" placeholder="请输入商户号/终端号" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="创建日期：">
              <a-date-picker format="YYYY-MM-DD" @change="pickerChange"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            </span>
          </a-col>
          <a-col :span="24">
            <a-divider dashed />
          </a-col>
        </a-row>
      </a-form>
    </div>

    <s-table
      style="margin-top: 24px"
      row-key="id"
      :columns="goodsColumns"
      :data="loadGoodsData"
      ref="table"
      :pagination="{
        showQuickJumper:true,
        pageSizeOptions: ['5', '10', '20', '30', '40'],
        showTotal:(total,range)=>{
          return `共 (${total}) 条记录 第 ${pageNo} / ${totalPage} 页`
        }
      }"
    >
      <span slot="handle" class="handler-rd">
        <template>
          <a>查看</a> | <a>浦发银行对账文件下载 </a>
        </template>
      </span>
    </s-table>
  </div>
</template>

<script>
import { STable } from '@/components'
import { ListReconciliationRecord } from '@/api/common'

export default {
  components: {
    STable
  },
  data () {
    return {
      totalPage: 1, // 总页码
      pageNo: 1, // 当前页码
      // 查询参数
      queryParam: {
        merchantId: '', // 商户号
        date: '' // 对账日期
      },
      goodsColumns: [
        {
          title: '支付日期',
          dataIndex: 'date',
          key: 'date'
        },
        {
          title: '商户号',
          dataIndex: 'merchantId',
          key: 'merchantId'
        },
        {
          title: '文件',
          dataIndex: 'localFileName',
          key: 'localFileName'
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'handle' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadGoodsData: (parameter) => {
        const reqData = {
          pageNum: parameter.pageNo, // 页数
          pageSize: parameter.pageSize, // 条数
          ...this.queryParam
        }
        for (const i in reqData) {
          if (!reqData[i]) {
            delete reqData[i]
          }
        }
        return ListReconciliationRecord(reqData).then(res => {
          if (res.status === 'S000') {
            return ({
              data: res.data.list,
              pageSize: 10,
              pageNo: parameter.pageNo,
              totalPage: 1,
              totalCount: res.data.total
            })
          } else {
            this.$notification.error({
              message: '错误',
              description: res.msg
            })
            return ({
              data: [],
              pageSize: 10,
              pageNo: 1,
              totalPage: 1,
              totalCount: 0
            })
          }
        })
      }
    }
  },
  methods: {
    pickerChange (event, date) {
      this.queryParam.date = date
    }
  }
}
</script>
<style lang="less" scoped>
.table-page-search-wrapper {

  background: #fff;
  .col {
    display: flex;
    line-height: 32px;
    margin: 10px 0;
    span {
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .risk-font {
    color: rgba(127, 127, 127, 0.65);
  }
}
/deep/ .ant-divider-horizontal {
  margin: 6px 0;
}
.handler-rd{
  color: #40a9ff;
}
</style>
